<template>
    <div class="modifyAddress">
          <!-- 顶部 -->
       <div class="addressHeader">
            <div @click="$router.go(-1)" class="header-left vip-icon icon-back"></div>
            <div class="header-middle">修改地址</div>
            <router-link to="/home" tag="div" class="header-right vip-icon icon-home"></router-link>
       </div>

       <!-- 收货地址修改 -->
       <van-address-edit
          :area-list="areaList"
          show-postal
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @change-detail="onChangeDetail"
          :address-info = "addressInfo"
        />
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
    export default {
        name:"modifyAddressView",
        data() {
          return {
            areaList,  //省市县地址信息
            searchResult: [],//详情地址 搜索地址信息
            addressList:null,  //保存地址信息
            addressInfo:null,  //收货人初始信息
            index:"", //下标
          };
        },
        methods: {
          onSave(content) {
            this.$toast('修改成功');
            // 替换修改的地址
            this.addressList.splice(this.index,1,content)

            // 重新存储地址数组
             window.localStorage.setItem("address",JSON.stringify(this.addressList));

             this.$router.push("/myAddress");
          },
          // 搜索地址方法
          onChangeDetail(val) {
            if (val) {
              this.searchResult = [
                {
                  name: '欣荣宏中心',
                  address: '欣荣宏旗杆路',
                },
                {
                  name: '广州软件学院',
                  address: '太平镇广从南路548号',
                },
                {
                   name:"鳌头镇城鳌大道999号粤嵌科技"
                }
              ];
            } else {
              this.searchResult = [];
            }
          },
        },

        created(){
          // 获取地址数组
            if(window.localStorage.getItem("address")){
                this.addressList = JSON.parse(window.localStorage.getItem("address"));
                this.index = this.$route.query.id;
                this.addressInfo = this.addressList[this.index];
            }
        }
    }
</script>

<style lang="scss" scoped>
.modifyAddress{
    background-color: #f3f4f5;
    height: 100%;
    .addressHeader{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #e1e1e1;
        background-color: #fff;
        .header-left{
            width: 56px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            font-size: 20px;
        }

        .header-middle{
            text-align: center;
            line-height: 44px;
            font-size: 18px;
            flex: 1;
        }
        .header-right{
            font-size: 20px;
            width: 56px;
            height: 44px;
            text-align: center;
            line-height: 44px;
        }
    }
}
</style>